<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>

          <div class="business-tabs">
            <el-tabs v-model="tabsName" @tab-click="handleClick">
              <el-tab-pane label="收益情况" name="1"></el-tab-pane>
              <el-tab-pane label="到账情况" name="2"></el-tab-pane>
            </el-tabs>
          </div>

          <div class="search">
            <el-row>
              <el-form class="form" label-width="100px" :model="orderParams">
                <el-col :span="12">
                  <el-form-item label="商家名称">
                    <el-input v-model="orderParams.shopName" size="mini" placeholder="请输入商家名称"></el-input>
                  </el-form-item>
                  <el-form-item label="日期">
                    <div class="block">
                      <el-date-picker v-model="value1" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="chooseTimeRange">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="商家编号">
                    <el-input v-model="orderParams.shopCode" size="mini" placeholder="请输入商家编号"></el-input>
                  </el-form-item>
                  <el-form-item label="所属区域">
                    <el-cascader ref="address" size="large" :options="optionProps" v-model="selectedOptions" @change="handleChange">
                    </el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :offset="8">
                  <el-form-item></el-form-item>
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table" v-if="tabsName == 1">
            <div class="table-wrapper">
              <el-table :data="userList" style="width: 100%" align='center' :header-cell-style="{background:'#eef1f6'}">

                <el-table-column prop="payTime" label="日期" align='center'>
                </el-table-column>
                <el-table-column prop="shopName" label="商家名称" align='center' :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="shopCode" label="商家编号" align='center'>
                </el-table-column>
                <el-table-column prop="sumMoney" label="收益分成" align='center'>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="business-table" v-if="tabsName == 2">
            <div class="table-wrapper">
              <el-table :data="userList" style="width: 100%" align='center' :header-cell-style="{background:'#eef1f6'}">

                <el-table-column prop="payTime" label="日期" align='center'>
                </el-table-column>
                <el-table-column prop="shopName " label="商家名称" align='center' :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="shopCode " label="商家编号" align='center'>
                </el-table-column>
                <el-table-column prop="applyMoney" label="到账金额" align='center'>
                </el-table-column>
                <el-table-column prop="applyMoney" label="到账时间" align='center'>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import pagination from '../../common/pagination'
  import bread from '../../common/bread'
  import {
    moneyPlatList,
    queryAddress
  } from '../../api/api'

  export default {
    data() {
      return {
        optionProps: {
          value: 'id',
          label: 'name',
          children: 'child'
        },
        stateList: [{
          value: 1,
          label: '处理中'
        }, {
          value: 2,
          label: '已通过'
        }, {
          value: 3,
          label: '未通过'
        }],
        userList: [],
        orderParams: {
          pageNum: 1,
          pageSize: 10,
          userId: sessionStorage.getItem('userId'),
          type: '1',
          shopName: '',
          shopCode: '',
          startTime: '',
          endTime: '',
          province: '',
          city: '',
          county: ''
        },
        pageTotal: 0,
        value1: '',
        selectedOptions: [],
        tabsName: '1'
      }
    },
    mounted() {
      this.getGoodsList()
    },
    methods: {
      chooseTimeRange(value) {
        for (var x in value) {
          this.orderParams.startTime = value[0]
          this.orderParams.endTime = value[1]
        }
      },
      // 格式化表单数据
      clearForm() {
        this.orderParams = {
          pageNum: 1,
          pageSize: 10,
          userId: sessionStorage.getItem('userId'),
          type: '1',
          shopName: '',
          shopCode: '',
          startTime: '',
          endTime: '',
          province: '',
          city: '',
          county: ''
        }
      },
      // 清除列表的搜索表单
      clearListSearch() {
        this.clearForm()
        this.value1 = ''
        this.getGoodsList()
      },
      show(scope) {
        console.log(scope)
      },

      handleClick() {
        this.orderParams.type = this.tabsName
        this.getGoodsList()
      },

      // 表格数据
      getGoodsList(type) {
        this.userList = []
        const para = Object.assign({}, this.orderParams)
        moneyPlatList(para).then(res => {
          console.log(res)
          this.userList = res.data.list
          this.pageTotal = res.data.total
        })
      },
      // 上下分页
      handleCurrentChange(val) {
        this.orderParams.pageNum = val
        this.getGoodsList()
      },
      // 每页显示多少条
      handleSizeChange(val) {
        this.orderParams.pageSize = val
        this.getGoodsList()
      },
      submitSearch() {
        this.getGoodsList()
      },
      getDate(date) {
        console.log(date)
      },
      queryAddress() {
        queryAddress().then(res => {
          this.optionProps = res.data;
        })
      },
      handleChange (value) {
        let labels = this.$refs['address'].getCheckedNodes()[0].pathLabels;
        this.orderParams.province = labels[0];
        this.orderParams.city = labels[1] === '全部' ? '' : labels[1];
        this.orderParams.county = labels[2] === '全部' ? '' : labels[2];
      }
    },
    components: {
      pagination,
      bread
    }
  }
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .search {
      margin: 0 0 20px 0;
    }

    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }
  }
</style>
